<template>
  <div class="details">
    <Navbar :back="true" title="商品详情" />
    <div class="details__container">
      <GoodsItemContent :goodsItem v-model="rateValue" :key="goodsItem.id" />
      <Desc :key="goodsItem.id" />
      <div class="details__container__more">
        <h2>More</h2>
        <ul>
          <GoodCard v-for="item in goods.list" :item="item" :color="goods.color" :key="item.id" />
        </ul>
      </div>
    </div>
    <div class="collect" @click="changeCollect" :class="collect && 'active'">
      <van-icon name="star" size="36rem" />
    </div>
  </div>
</template>

<script setup lang="ts">
import GoodsItemContent from "./components/GoodsItemContent.vue";
import Desc from "./components/index.vue";
import GoodCard from "@/components/GoodCard.vue";
import Navbar from "@/components/Navbar.vue";
import { GoodsItem } from "@/views/home/index.vue";
import { useRoute } from "vue-router";
import { ref, watch } from "vue";
import { getGoodsList, addBrowse, getCollectState } from "@/api";
import dayjs from "dayjs";
const route = useRoute();
const { item } = route.query as { item: string };
const goodsItem = ref<GoodsItem>(JSON.parse(item));
watch(route, (newVal) => {
  goodsItem.value = JSON.parse(newVal.query.item as string)
  initData()
},)
const rateValue = ref(5);
const collect = ref<boolean>(false)

const goods = ref({
  id: 1,
  list: [],
  color: "#f8e5ff",
});
const uid = JSON.parse(localStorage.getItem("userInfo")).id
async function initData() {
  const [, data, data2] = await Promise.all([addBrowse({ gid: goodsItem.value.id, uid: uid, time: dayjs().format('YYYY-MM-DD HH:mm:ss'), db: "browse" }), getGoodsList({ type: JSON.stringify({ key: "type", value: 1 }) }), getCollectState(uid, goodsItem.value.id)]) as any
  goods.value.list = data.data
  collect.value = !!data2.data
}
initData()
const changeCollect = async () => {
  await addBrowse({ gid: goodsItem.value.id, uid: uid, time: dayjs().format('YYYY-MM-DD HH:mm:ss'), db: "collect" })
  collect.value = !collect.value
}

</script>

<style lang="scss">
.details {
  font-size: 16rem;
  color: var(--font-color);

  .collect {
    color: #fff;
    position: fixed;
    bottom: 50rem;
    right: 20rem;
    border-radius: 10rem;
    height: 50rem;
    width: 50rem;
    box-shadow: 0rem 1rem 4rem #eee;
    background-color: #eee;
    transition: .3s;
    @include flex(row, center, center);

    &.active {
      background-color: $color-yellow;

      box-shadow: 0rem 1rem 4rem $color-yellow ;

    }
  }

  &__container {
    height: calc(100vh - 77rem);
    background: var(--linear-gradient);
    box-sizing: border-box;
    padding: 0 20rem 30rem;
    overflow: scroll;

    h2 {
      font-size: 16rem;
      font-weight: 600;
    }

    &__more {
      width: 100%;

      ul {
        color: #333;
        margin-top: 30rem;
        align-items: center;
        @include flex($jc: space-between);
      }
    }
  }
}
</style>
